<template>
  <view class="multi-config-container">
    <!-- 顶部区域 -->
    <view class="top-section">
      <button class="invite-btn" @click="handleInvite">
        <image src="/static/plus.png" class="btn-icon"></image>
        邀请好友
      </button>
      
      <view class="timer-section">
        <text>回合时间：{{ currentTime }}秒</text>
        <slider 
          :value="currentTime"
          min="3"
          max="60"
          @change="handleTimeChange"
        />
      </view>
    </view>

    <!-- 中部区域 -->
    <scroll-view class="member-list" scroll-y>
      <template v-if="members.length > 0">
        <view class="member-grid">
          <member-card 
            v-for="member in members"
            :key="member.id"
            :member="member"
          />
        </view>
      </template>
      <view v-else class="empty-tip">
        <image src="/static/empty.png" style="width: 120px; height: 120px;"></image>
        <text>暂无玩家，快去邀请好友吧~</text>
      </view>
    </scroll-view>

    <!-- 底部区域 -->
    <button class="start-btn" @click="handleStart" :loading="loading">
      开始游戏
    </button>

    <!-- 右上角入口 -->
    <view class="entry-icons">
      <button class="entry-btn" @click="navigateTo('achievement')">
        <image src="/static/medal.png" class="icon"></image>
      </button>
      <button class="entry-btn" @click="navigateTo('stats')">
        <image src="/static/chart.png" class="icon"></image>
      </button>
      <button class="entry-btn" @click="navigateTo('rules')">
        <image src="/static/help.png" class="icon"></image>
      </button>
    </view>
  </view>
</template>

<script>
import MemberCard from '@/components/member-card.vue'
import GameService from '@/services/game'

export default {
  components: {
    MemberCard
  },
  data() {
    return {
      currentTime: 10,
      members: [],
      loading: false
    }
  },
  created() {
    this.fetchPlayers()
  },
  methods: {
    async fetchPlayers() {
      try {
        const res = await GameService.getPlayers()
        this.members = res?.players || []
      } catch (error) {
        console.error('获取玩家列表失败:', error)
        this.members = []
      }
    },
    handleInvite() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        title: '加入我的弹珠游戏',
        summary: '快来和我一起玩童年弹射-弹珠擂台吧！',
        href: 'https://game.example.com/join',
        success: function (res) {
          uni.showToast({
            title: '邀请成功',
            icon: 'success'
          });
        },
        fail: function (err) {
          uni.showToast({
            title: '邀请失败',
            icon: 'none'
          });
          console.error('分享失败:', err);
        }
      });
    },
    handleTimeChange(e) {
      this.currentTime = e.detail.value
      this.notifyTimeChange()
    },
    async notifyTimeChange() {
      try {
        await GameService.updateTime(this.currentTime)
        uni.showToast({
          title: '时间更新成功',
          icon: 'success'
        })
      } catch (error) {
        console.error('时间更新失败:', error)
        uni.showToast({
          title: '时间更新失败',
          icon: 'none'
        })
      }
    },
    async handleStart() {
      this.loading = true
      try {
        await GameService.startGame(this.currentTime)
        uni.showToast({
          title: '游戏开始成功',
          icon: 'success'
        })
        uni.navigateTo({
          url: '/pages/game/game-start'
        })
      } catch (error) {
        console.error('游戏开始失败:', error)
        uni.showToast({
          title: '游戏开始失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    async navigateTo(type) {
      const routes = {
        achievement: '/pages/achievement/index',
        stats: '/pages/stats/index', 
        rules: '/pages/rules/index'
      }
      if (routes[type]) {
        try {
          await uni.navigateTo({
            url: routes[type],
            fail: (err) => {
              console.error('导航失败:', err)
              uni.showToast({
                title: '页面不存在，请检查路由配置',
                icon: 'none'
              })
            }
          })
        } catch (error) {
          console.error('导航异常:', error)
          uni.showToast({
            title: '跳转失败，请稍后重试',
            icon: 'none'
          })
        }
      } else {
        uni.showToast({
          title: '功能开发中',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style>
.multi-config-container {
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #f0f9ff, #e6f7ff);
  box-sizing: border-box;
  position: relative;
}

.top-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
  background-color: rgba(255,255,255,0.9);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  backdrop-filter: blur(5px);
}

.invite-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: linear-gradient(135deg, #4CAF50, #8BC34A);
  color: white;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(76,175,80,0.3);
  transition: all 0.3s ease;
}

.invite-btn:active {
  transform: scale(0.96);
}

.btn-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

.timer-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  color: #333;
}

.member-list {
  flex: 1;
  margin-bottom: 16px;
  background-color: rgba(255,255,255,0.9);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  max-height: 60vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  backdrop-filter: blur(5px);
}

.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #666;
  font-size: 15px;
  grid-column: 1 / -1;
}

.start-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #2196F3, #03A9F4);
  color: white;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(33,150,243,0.3);
  z-index: 100;
  transition: all 0.3s ease;
}

.start-btn:active {
  transform: scale(0.96);
}

.entry-icons {
  position: fixed;
  top: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 100;
}

.entry-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.entry-btn:active {
  transform: scale(0.9);
}

.icon {
  width: 22px;
  height: 22px;
}

@media (max-width: 375px) {
  .member-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .top-section {
    padding: 12px;
  }
  
  .invite-btn {
    padding: 10px 20px;
    font-size: 15px;
  }
}
</style>
